<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Navigation Manager</title>
</head>
<body>


<div class="container">
    <div class="page-header">
        <h1>导航管理</h1>
    </div>
    <div class="panel panel-default">
        <div class="panel-body">
            <form class="form-inline" method="post" id="navigation_search_form">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="导航名称" id="keyword">
                </div>
                <button type="submit" class="btn btn-default">
                    <i class="fa fa-search"></i> Search
                </button>
                <div class="pull-right">
                    <button type="button" class="btn btn-success" id="navigation_create">
                        <i class="fa fa-plus"></i> 新增
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">系统导航</div>
        <div class="panel-body" id="navigation_list"></div>
    </div>
</div>

<div class="modal" id="navigation_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="navigation_modal_submit"><i class="fa fa-save"></i> Save</button>
            </div>
        </div>
    </div>
</div>

<script type="text/x-handlebars-template" id="navigation_table_template">
    {{#if data}}
        <table class="table table-hover" id="navigation_table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>地址</th>
                    <th>图标</th>
                    <th>叶子</th>
                    <th>排序码</th>
					<th>有效开始时间</th>
					<th>有效结束时间</th>
                    <th>创建用户</th>
                    <th>创建时间</th>
                    <th>最后更新用户</th>
                    <th>最后更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {{#data}}
                    {{> tr}}
                {{/data}}
            </tbody>
        </table>
    {{else}}
        <div class="alert alert-warning">Can not find any data!</div>
    {{/if}}
</script>

<script type="text/x-handlebars-template-partial" id="navigation_table_tr_template">
    <tr data-id="{{itemId}}" data-name="{{itemName}}">
        <td>{{itemId}}</td>
        <td>{{itemName}}</td>
        <td>{{url}}</td>
        <td>{{icon}}</td>
        <td>{{leaf}}</td>
        <td>{{orderCode}}</td>
        <td>{{createdUser}}</td>
        <td>{{createdDate}}</td>
        <td>{{updateLastUser}}</td>
        <td>{{updateLastDate}}</td>
        <td>
            <button class="btn btn-xs btn-primary navigation_edit" title="Edit"><i class="fa fa-fw fa-edit"></i></button>
            <button class="btn btn-xs btn-default navigation_delete" title="Delete"><i class="fa fa-fw fa-trash-o"></i></button>
        </td>
    </tr>
</script>

<script type="text/x-handlebars-template" id="navigation_modal_form_template">
    <form>
        <input type="hidden" id="itemId" value="{{itemId}}">
		<input type="hidden" id="parentId" value="{{parentId}}">
        <div class="form-group">
            <label for="itemName">名称:</label>
            <input type="text" value="{{itemName}}" class="form-control" id="itemName">
        </div>
        <div class="form-group">
            <label for="url">地址:</label>
            <input type="text" value="{{url}}" class="form-control" id="url">
        </div>
        <div class="form-group">
            <div class="form-group">
            	<label for="orderCode">排序码:</label>
            	<input type="text" value="{{orderCode}}" class="form-control" id="orderCode">
        	</div>
            <div class="form-group">
            	<label for="icon">小图标:</label>
            	<input type="text" value="{{icon}}" class="form-control" id="icon">
        	</div>
        </div>
    </form>
</script>

<script src="js/global.js"></script>
<script src="js/NavigationView.js"></script>
<script src="js/NavigationService.js"></script>

<script>
    $(function() {
        // 显示所有产品
        //$('body').hide(); // 隐藏界面
        NavigationService.findNavigations(function() {
            $('body').show(); // 显示界面
        });

        // 根据关键字查询产品
        $('#navigation_search_form').on('submit', function() {
            var keyword = $('#keyword').val().trim();
            NavigationService.findNavigationsByName(keyword);
            return false;
        });

        // 点击 Edit 按钮，弹出编辑产品对话框
        $(document).on('click', '#navigation_table .navigation_edit', function() {
        	var $tr = $(this).closest('tr');
        	var itemId = $tr.data('id');
        	NavigationService.findNavigationById(itemId);
            $('#navigation_modal').modal('show');
            return false;
        });

        // 点击 Delete 按钮，删除产品
        $(document).on('click', '#navigation_table .navigation_delete', function() {
            var $tr = $(this).closest('tr');
            var itemId = $tr.data('id');
            var name = $tr.data('name');
            console.warn(itemId,name);
            if (confirm('Do you want to delete this navigation? [' + name + ']')) {
                NavigationService.deleteNavigationById(itemId);
            }
            return false;
        });

        // 点击 Create 按钮，弹出创建产品对话框
        $('#navigation_create').on('click', function() {
            var title = 'Create Navigation';
            var navigation = {
            	itemId: 0,
            	itemName: '',
            	orderCode: '',
            	icon: '',
            	url: ''
            };
            NavigationView.renderNavigationModal(title, navigation);
            $('#navigation_modal').modal('show');
        });

        // 点击对话框中的 Save 按钮，创建或更新产品
        $('#navigation_modal_submit').on('click', function() {
            var id = $('#itemId').val();
            var navigation = {
            	itemId:id,
            	parentId:$('#parentId').val().trim(),
            	itemName: $('#itemName').val().trim(),
            	orderCode: $('#orderCode').val().trim(),
            	icon: $('#icon').val().trim(),
            	url: $('#url').val().trim()
            };
            //console.warn(id,navigation);
            if (id == 0) {
                NavigationService.createNavigation(navigation);
            } else {
                NavigationService.updateNavigation(navigation);
            }
            $('#navigation_modal').modal('hide');
        });
		//
    });
</script>
